<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

		<title>Mobiscroll</title>

		<script src="../js/jquery-2.1.0.js"></script>

		<!--Includes-->
		<link href="css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
		<script src="js/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>

		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
				font-family: arial, verdana, sans-serif;
				font-size: 12px;
				background: #ddd;
			}
			
			input,
			select {
				width: 100%;
				padding: 5px;
				margin: 5px 0;
				border: 1px solid #aaa;
				box-sizing: border-box;
				border-radius: 5px;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-webkit-border-radius: 5px;
			}
			
			.header {
				border: 1px solid #333;
				background: #111;
				color: white;
				font-weight: bold;
				text-shadow: 0 -1px 1px black;
				background-image: linear-gradient(#3C3C3C, #111);
				background-image: -webkit-gradient(linear, left top, left bottom, from(#3C3C3C), to(#111));
				background-image: -moz-linear-gradient(#3C3C3C, #111);
			}
			
			.header h1 {
				text-align: center;
				font-size: 16px;
				margin: .6em 0;
				padding: 0;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			
			.content {
				padding: 15px;
				background: #fff;
			}
			
			.car {
				position: relative;
				height: 100%;
			}
			
			.car img {
				height: 28px;
				display: block;
				margin: 0 auto;
			}
			
			.car .img-cont {
				width: 80px;
				height: 28px;
				text-align: center;
				float: left;
				position: relative;
				top: 50%;
				margin-top: -14px;
			}
			
			.car span {
				float: left;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				var curr = new Date().getFullYear();
				var opt = {

				}
				opt.tree_list = {
					preset: 'list',
					labels: ['Region', 'Country', 'City'],
					defaultValue:[1,1,1],
				};
				$("#demo_tree_list").show();
				$('#test_tree_list').val('').scroller('destroy').scroller($.extend(opt['tree_list'], {
					theme: 'android-ics light',
					mode: 'scroller',
					display: 'inline',
					lang: 'es'
				}));

				$('#demo').trigger('change');
			});
		</script>
	</head>

	<body>
		<div class="header">
			<h1>Mobiscroll</h1>
		</div>

		<div data-role="fieldcontain" class="demos fieldcontain" id="demo_tree_list">
			<label for="test_tree_list_dummy">Click here to try</label>
			<ul id="test_tree_list">
				<li>America
					<ul>
						<li>USA
							<ul>
								<li>Washington</li>
								<li>Florida</li>
								<li>Los Angeles</li>
								<li>San Francisco</li>
							</ul>
						</li>
						<li>Canada
							<ul>
								<li>Vancouver</li>
								<li>Winnipeg</li>
								<li>Calgary</li>
							</ul>
						</li>
						<li>Brazil
							<ul>
								<li>Rio de Janeiro</li>
								<li>Sao Paolo</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>Europe
					<ul>
						<li>France
							<ul>
								<li>Paris</li>
								<li>Toulouse</li>
								<li>Marseille</li>
								<li>Lyon</li>
							</ul>
						</li>
						<li>Germany
							<ul>
								<li>Berlin</li>
								<li>Frankfurt</li>
								<li>Hamburg</li>
							</ul>
						</li>
						<li>Spain
							<ul>
								<li>Madrid</li>
								<li>Barcelona</li>
								<li>Saragosa</li>
							</ul>
						</li>
						<li>Italy
							<ul>
								<li>Rome</li>
								<li>Palermo</li>
								<li>Genoa</li>
								<li>Torino</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>Asia
					<ul>
						<li>China
							<ul>
								<li>Shanghai</li>
								<li>Hong Kong</li>
								<li>Beijing</li>
							</ul>
						</li>
						<li>Japan
							<ul>
								<li>Tokyo</li>
								<li>Kagoshima</li>
								<li>Osaka</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	
	</body>

</html>